<template>
  <div :style="styleColor" style="display:flex;align-items: center;">
    <div class="left">
        <img src="@/assets/images/bigViewIMG2/weizhi.png" alt="">
        <div class="add">当前位置：</div>
    </div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/visual/bigscreen/viewer?reportCode=EArchives_first' }">企业E档案</el-breadcrumb-item>
        <el-breadcrumb-item>档案全景</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    }, 
    data() {
        return {
            options: {},
            
        }
    },
    computed: {
        transStyle() {
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static",
                background: this.transStyle.background,
                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                right: this.transStyle.right + "px"

            }
        }
    },
    mounted() {
        this.options = this.value;

    },
}
</script>

<style scoped lang="scss">
.left {
    display: flex;
    align-items: center;
    img {
        width: 16px;
        height: 16px;
    }
    .add {
        margin-left: 10px;
        margin-right: 10px;
        color: #fff;
        font-size: 16px;
    }
}
::v-deep .el-breadcrumb {
    .el-breadcrumb__item {
        .el-breadcrumb__inner {
            color: #00ffff;
            font-size: 16px;
        }
        .is-link {
            color: #fff;
        }
    }
}
</style>